<template>
  <div id="collection-detail" v-if="arrayDetail.count != null">
    <div class="col-bg">
      <img :src="ipfsHash + detail.logo" alt="" />
    </div>
    <div class="col-info">
      <!-- logo -->
      <div class="header-flex">
        <div class="flex-box">
          <div class="col-cover">
            <img :src="ipfsHash + detail.logo" alt="cover" />
          </div>
          <div class="col-name">{{ detail.title }}</div>
        </div>
        <div class="like-box" v-if="!isMe">
          <div
            class="like-btn unlike"
            @click="handelLike()"
            v-if="detail.iscolletion == 0"
          >
            收藏
          </div>
          <div
            class="like-btn liked"
            @click="handelLike()"
            v-if="detail.iscolletion == 1"
          >
            已收藏
          </div>
        </div>
      </div>
      <!-- 用户信息 -->
      <div class="user-info-inline">
        <div class="user-info" @click="$router.push(`/user/${detail.owner}`)">
          <div class="user-avatar">
            <img
              v-if="detail.owner_logo != null"
              :src="ipfsHash + detail.owner_logo"
              alt=""
            />
            <RandomAvatar v-else :user_address="detail.owner" />
          </div>
          <div class="user-name" v-if="detail.owner_nickname != null">
            {{ detail.owner_nickname }}
          </div>
          <div class="user-name" v-else>
            {{ detail.owner | filterAddress }}
          </div>
        </div>
      </div>

      <!-- 描述 -->
      <div class="col-desc">
        {{ detail.info }}
      </div>
      <div class="count-box-flex">
        <CountBox :countData="countData" />
        <!-- 管理合集按钮 -->
        <div
          class="manage-col-btn"
          @click="$router.push(`/edit/collection/${id}`)"
          v-if="isMe"
        >
          管理合集
        </div>
      </div>
    </div>

    <!-- <NavBar :navs="navs" /> -->
    <FilterBar @queryData="queryData" />
    <div class="item-box">
      <ArtItem
        :artData="item"
        class="art-item"
        v-for="item in detail.shops"
        :key="item.id"
        :type="isMe?'my':'selling'"
      />
    </div>

    <div class="pagination" v-if="arrayDetail.count != 0">
      <el-pagination
        :page-size="parseInt(filterOptions.pageSize)"
        :pager-count="5"
        layout="prev, pager, next"
        :total="arrayDetail.count"
        :current-page="parseInt(filterOptions.pageIndex)"
        background
        @prev-click="prevPage"
        @next-click="nextPage"
        @current-change="pageChange"
      >
      </el-pagination>
    </div>
    <div class="no-result" v-if="arrayDetail.count == 0">
      <span>什么都没找到</span>
    </div>
  </div>
</template>

<script>
import FilterBar from "@/components/FilterBar";
import ArtItem from "@/components/ArtItem";
import NavBar from "@/components/NavBar";
import CountBox from "@/components/CountBox";
import { mapState } from "vuex";
import { collete } from "@/api";
export default {
  name: "CollectionDetail",
  data() {
    return {
      id: 0,
      navs: [
        { id: 0, label: "正在售卖", type: "onsale", url: "" },
        { id: 1, label: "全部", type: "all", url: "" },
      ],
      countData: [
        { id: 0, name: "粉丝数", count: "0" },
        { id: 2, name: "作品数", count: "0" },
        { id: 3, name: "正在销售", count: "0" },
      ],

      // 分页数据
      pageIndex: "1",
      pageSize: "20",

      ipfsHash: "http://172.17.147.23:8888/ipfs/",

      // 是否为登录的用户
      isMe: false,

      detail: {},
    };
  },
  components: {
    ArtItem,
    NavBar,
    CountBox,
    FilterBar,
  },

  watch: {
    arrayDetail(newValue) {
      this.countData[0].count = newValue.data[0].number_concerns;
      this.countData[1].count = newValue.data[0].number_nft;
      this.countData[2].count = newValue.data[0].number_fans;

      // 判断是否为登录的用户
      this.isMe = newValue.data[0].owner == this.$store.getters.user_address;

      this.detail = newValue.data[0];
    },
  },

  mounted() {
    this.id = this.$route.params.id;
    this.$store.dispatch("arrayDetail", {
      id: this.id,
      pageSize: this.pageSize,
      pageIndex: this.pageIndex,
      classify: "所有",
      form_of_sale: "所有",
      minprice: "0",
      maxprice: "10000000000000000000000000000",
    });
  },
  computed: {
    ...mapState({
      arrayDetail: (store) => store.array.arrayDetail,
      filterOptions: (store) => store.array.filterOptions,
    }),
  },

  provide() {
    return {
      queryData: this.queryData,
    };
  },

  methods: {
    // 上一页
    prevPage() {
      console.log("prev");
      this.pageIndex = parseInt(this.filterOptions.pageIndex) - 1;
      this.$store.dispatch("arrayDetail", {
        ...this.filterOptions,
        pageIndex: this.pageIndex,
      });
    },
    // 下一页
    nextPage() {
      console.log("next");
      this.pageIndex = (parseInt(this.filterOptions.pageIndex) + 1).toString();
      this.$store.dispatch("arrayDetail", {
        ...this.filterOptions,
        pageIndex: this.pageIndex,
      });
    },

    // 页数改变
    pageChange(page) {
      this.$store.dispatch("arrayDetail", {
        ...this.filterOptions,
        pageIndex: page.toString(),
      });
    },

    queryData(data) {
      this.$store.dispatch("arrayDetail", data);
    },

    // 收藏和取消收藏
    async handelLike() {
      let result = await collete({
        user_address: this.$store.getters.user_address,
        shop_id: this.detail.id,
        type: "array",
      });
      if (result.flag) {
        this.$message.success(result.msg);
        // 取消收藏
        if (this.detail.iscolletion == 1) {
          this.detail.iscolletion = 0;
        } else {
          this.detail.iscolletion = 1;
        }
      } else {
        this.$message.error(result.msg);
      }
    },
  },
};
</script>

<style lang='less'>
#collection-detail {
  .pagination {
    display: flex;
    justify-content: center;
  }
  .no-result {
    height: 20vh;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #999;
  }
  min-height: 200px;
  // background: #eee;
  .col-bg {
    overflow: hidden;
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    height: 300px;
  }
  .col-info {
    margin: 0 auto;
    margin-top: -120px;
    padding: 0 60px;
    .header-flex {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .flex-box {
        display: flex;
        align-items: center;
        .col-cover {
          width: 200px;
          height: 200px;
          padding: 5px;
          background: rgba(255, 255, 255, 0.2);
          border-radius: 10px;
          img {
            border-radius: 10px;
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }
        .col-name {
          font-size: 24px;
          font-weight: bold;
          color: #eee;
          margin-left: 20px;
        }
      }
      .like-btn {
        z-index: 1;
        cursor: pointer;
        border-radius: 99px;
        padding: 10px 20px;
      }
      .unlike {
        background: var(--themeColor1);
        color: #fff;
      }
      .liked {
        background: rgb(218, 218, 218);
        color: #fff;
      }
    }

    .user-info-inline {
      display: inline-block;
      .user-info:hover {
        background: var(--themeColor1);
        color: #fff;
        transition: 0.3s ease;
      }
      .user-info {
        margin-top: 20px;
        cursor: pointer;
        display: flex;
        align-items: center;
        border-radius: 90px;
        padding: 5px 12px 5px 5px;
        background: rgba(255, 255, 255, 0.4);
        color: #333;
        box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.1);
        -webkit-box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.1);
        -moz-box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.1);
        // backdrop-filter: blur(20px) brightness(1.4);
        .user-avatar {
          height: 30px;
          width: 30px;
          img {
            border-radius: 50%;
            width: 100%;
            height: 100%;
          }
        }
        .user-name {
          margin-left: 5px;
          font-size: 14px;
        }
      }
    }
    .col-desc {
      margin-top: 20px;
      font-size: 14px;
      max-width: 640px;
    }

    .count-box-flex {
      margin-top: 10px;
      display: flex;
      align-items: center;
      .manage-col-btn:hover {
        opacity: 0.4;
      }
      .manage-col-btn {
        transition: all 0.2s ease;
        cursor: pointer;
        margin-left: 20px;
        background: var(--themeColor1);
        color: #fff;
        padding: 8px 10px;
        border-radius: 99px;
        font-size: 14px;
      }
    }
  }
}
</style>